<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 button{width: 100px; height: 50px;background-color: white;}
        #div1 .active{background-color: yellow;}
        #div1 div{width: 300px; height: 400px;display: none}
    </style>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById('div1')
            var aBtns = oDiv.getElementsByTagName('button')
            var oDivs = oDiv.getElementsByTagName('div')

           for(var i = 0;i<aBtns.length;i++){
               aBtns[i].index = i
               aBtns[i].onclick = function(){
                   for(var j = 0;j<oDivs.length;j++){
                       aBtns[j].className= ''
                       oDivs[j].style.display = 'none'
                       //清空样式
                   }

                   oDivs[this.index].style.display = 'block'
                   console.log(this)
                   this.className = 'active'
               }
           }
        }
    </script>
</head>
<body>
    <div id = 'div1'>
        <button class="active">HTML5</button>
        <button>JAVA</button>
        <button>php</button>
        <br>
        <div style="display: block;">我是HTML5</div>
        <div>我是JAVA</div>
        <div>我是php</div>
    </div>
</body>
</html>